<template>
    <u-navbar
        title=""
        autoBack
        placeholder
        height="44px"
        bgColor="#21232c"
        leftIconColor="#fff"
    >
    </u-navbar>
    <view class="app-container" style="padding-bottom: 200rpx;">
        <view class="align-center mb36">
            <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="130rpx" height="140rpx" radius="12rpx"></up-image>
            <view class="font28 flex1" style="margin-left: 26rpx;">活动标题活动标题活动标题活动标题活动标题活动标题</view>
        </view>
        <view class="font28 weight mb26">活动介绍</view>
        <view class="card font26 introduction">
            活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍
        </view>
        <view class="font28 weight mb26">已参加</view>
        <view class="card mb36">
            <view class="justify-between font28 mb36">
                <view class="align-center">
                    <view class="align-center sex-box">
                        <u-icon name="woman" color="#F37574"></u-icon>
                        <text class="weight">：5</text>
                    </view>
                    <view class="align-center sex-box ml16">
                        <u-icon name="man" color="#5D96EF"></u-icon>
                        <text class="weight">：5</text>
                    </view>
                </view>
                <view>1/10</view>
            </view>
            <view class="justify-between">
                <view class="align-center" style="gap: 8rpx;">
                    <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="62rpx" height="62rpx" shape="circle"></up-image>
                    <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="62rpx" height="62rpx" shape="circle"></up-image>
                    <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="62rpx" height="62rpx" shape="circle"></up-image>
                    <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="62rpx" height="62rpx" shape="circle"></up-image>
                </view>
                <u-icon name="arrow-right" color="#707070"></u-icon>
            </view>
        </view>
        <view class="font28 weight mb26">活动详情</view>
        <view class="card mb36">
            <view class="align-center mb36">
                <i class="iconfont icon-naozhong"></i>
                <text class="font26 ml26">2023/9/14周四19:00</text>
            </view>
            <view class="align-center mb36">
                <u-icon name="map-fill" color="#fff"></u-icon>
                <view class="justify-between ml26 flex1">
                    <view>
                        <view>运河财富中心9幢</view>
                        <view class="font24 grey">浙江省杭州市拱墅区申花路运河财富中心大...</view>
                    </view>
                    <u-line color="#999999" length="59rpx" direction="col"></u-line>
                    <view class="circle">
                        <i class="iconfont icon-daohang"></i>
                    </view>
                </view>
            </view>
            <view class="align-center">
                <i class="iconfont icon-qizi"></i>
                <view class="align-center ml26" style="gap: 10rpx;">
                    <view class="tag">密室逃脱</view>
                </view>
            </view>
        </view>
        <view class="font28 weight mb26">发起人</view>
        <view class="card justify-between mb26">
            <view class="align-center">
                <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="80rpx" height="80rpx" shape="circle"></up-image>
                <view class="font28 flex1" style="margin-left: 26rpx;">17shou</view>
            </view>
            <view class="align-center">
                <u-line color="#999999" length="59rpx" direction="col"></u-line>
                <view class="circle" style="margin-left: 30rpx;">
                    <i class="iconfont icon-daohang"></i>
                </view>
            </view>
        </view>
        <view class="card justify-between">
            <view class="font28">发起者不参加此活动</view>
            <u-switch activeColor="#966BFF"></u-switch>
        </view>
    </view>
    <view class="footer justify-around">
        <view class="text-center">
            <i class="iconfont icon-fenxiang"></i>
            <view class="font20 mt16">分享</view>
        </view>
        <view class="text-center">
            <i class="iconfont icon-qunliao"></i>
            <view class="font20 mt16">群聊</view>
        </view>
        <view class="btn">报名</view>
    </view>
</template>

<script setup lang="ts">

</script>

<style>
page {
    background: #21232c;
    color: #FFFFFF;
}
</style>

<style lang="scss" scoped>
.mb36 {
    margin-bottom: 36rpx;
}

.card {
    padding: 26rpx;
    border-radius: 20rpx;
    background: #1C1E27;
}

.introduction {
    min-height: 300rpx;
    margin-bottom: 36rpx;
    line-height: 48rpx;
}

.sex-box {
    padding: 10rpx 15rpx;
    background: #333333;
    border-radius: 8rpx;
}

.tag {
    padding: 2rpx 12rpx;
    border: 1rpx solid #FFFFFF;
    border-radius: 15rpx;
    font-size: 20rpx;
}

.circle {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: #333333;
    text-align: center;
    line-height: 60rpx;
}

.footer {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 36rpx 0 70rpx;
    background: #21232C;
    box-shadow: 0rpx -3rpx 10rpx 1rpx rgba(51,51,51,0.3);
    border-radius: 30rpx 30rpx 0rpx 0rpx;
}

.btn {
    width: 380rpx;
    height: 80rpx;
    background: #966BFF;
    border-radius: 46rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 30rpx;
    font-weight: 800;
}
</style>